<template>
  <div class="main">
    <el-form class="form" :model="form" :rules="rules">
      <h2 class="title">XX煤矿三维可视化</h2>
      <el-form-item>
        <el-input size="large" v-model="form.name" placeholder="请输入用户名" />
      </el-form-item>
      <el-form-item>
        <el-input size="large" v-model="form.password" placeholder="请输入密码" type="password" />
      </el-form-item>
      <el-button class="submit" plain @click="handleSubmit">登&ensp;录</el-button>

      <div class="circle-line-1"></div>
      <div class="circle-line-2"></div>
    </el-form>

    <div class="circle-full"></div>
    <div class="circle-line"></div>
    <img src="@/assets/images/login.png" class="img" />
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'

const rules = {
  name: [{ required: true, message: '请输入用户名' }],
  password: []
}
const form = ref({
  name: '',
  password: ''
})

function handleSubmit() {}
</script>
<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100%;
  .form {
    width: 450px;
    padding: 40px;
    position: absolute;
    left: calc(50% - 225px);
    top: calc(50% - 250px);
    background: linear-gradient(
      180deg,
      rgba(43, 224, 124, 0),
      rgba(43, 224, 124, 0.2) 91.886%,
      rgba(43, 224, 124, 0) 100%
    );
    .el-form-item {
      margin-bottom: 24px;
    }
    .el-input {
      padding: 7px;
    }
    .title {
      font-size: 38px;
      color: rgb(11, 237, 167);
      font-weight: bold;
      line-height: 49px;
      letter-spacing: 2px;
      text-align: center;
      margin: 30px 0;
    }
    .submit {
      width: 100%;
      background-color: var(--el-color-primary);
      font-size: 18px;
      padding: 26px;
      color: var(--text-color) !important;
    }

    .circle-line-1 {
      position: absolute;
      width: 450px;
      height: 450px;
      border-radius: 50%;
      border: 2px solid transparent;
      background-clip: padding-box, border-box;
      background-origin: padding-box, border-box;
      background-image: linear-gradient(to right, #222, #222),
        linear-gradient(180deg, rgba(43, 224, 124, 0), rgb(19, 190, 78));
      opacity: 0.1;
      left: calc(50% - 450px / 2);
      top: -200px;
      animation: rotate 2s linear infinite;
    }

    .circle-line-2 {
      position: absolute;
      width: 520px;
      height: 520px;
      border-radius: 50%;
      border: 2px solid transparent;
      background-clip: padding-box, border-box;
      background-origin: padding-box, border-box;
      background-image: linear-gradient(to right, #222, #222),
        linear-gradient(180deg, rgba(43, 224, 124, 0), rgb(19, 190, 78));
      opacity: 0.1;
      left: calc(50% - 520px / 2);
      bottom: -220px;
      animation: rotate 2s linear infinite;
    }
  }

  .img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
  }
  .circle-full {
    position: absolute;
    width: 960px;
    height: 960px;
    border-radius: 50%;
    background-color: rgb(21, 144, 80);
    opacity: 0.1;
    left: calc(50% - 960px / 2);
    top: calc(50% - 130px);
    transform: rotateX(80deg);
  }
  .circle-line {
    position: absolute;
    width: 1099px;
    height: 1099px;
    border-radius: 50%;
    border: 4px solid transparent;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image: linear-gradient(to right, #222, #222),
      linear-gradient(180deg, rgba(42, 255, 145, 0), rgb(42, 255, 145));
    opacity: 0.1;
    left: calc(50% - 1099px / 2);
    top: calc(50% - 190px);
    animation: rotate 2s linear infinite;
  }
}

@keyframes rotate {
  0% {
    transform: rotateX(80deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(80deg) rotateZ(360deg);
  }
}
</style>
